<!DOCTYPE html>
<meta charset="utf-8">
<html lang='en'>

<head>
    <title>基于交易数据的可视化分析</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" />
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3-sankey@0.12.3/dist/d3-sankey.min.js"></script>
    <script src="js/main.js"></script>
    <script src="js/circular-bar-plot.js"></script>
    <script src="js/innovringchart.js"></script>
    <link rel="shortcut icon" href="#">
    <script src="js/sanky.js"></script>
    <script src="js/network_plot.js"></script>
    <link rel="stylesheet" href="style/main_style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Ysabeau:ital,wght@1,300&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
</head>

<body>
    <div class="myContainer "  style="background-color: #87CEEB;">
        <h2 id="project_title" class="text-center" style="padding:2rem ;color: #4682B4;font-size: 40px;">基于交易数据的可视化分析</h2>
        <hr>
        <h5 id="project_team_names" class="text-center" style="color: #4682B4;font-size: 30px;">段伊然 &ensp; 胡佳</h5>
        <hr>
        <div class="col" style="background-color: #87CEEB;">
        <div class="row">

            <div class="col-md-2" id="right-scroll-div">
                <div class="col">
                    <!-- circular  and  ring both -->
                    <div class="row-m-4" id="circular_and_ring_both">
                        <!-- loyalt_cc_figure -->
                        <iframe src="data/loyalt_cc_figure.html" width="100%" height="1000px" frameborder="0" scrolling="no"  class="row-m-4 border rounded-4 shadow" id="loyalt_cc_figure_div" style="background-color: #b0e0e6;"></iframe>
                        
                        <div class="row">

                            <!-- circular-bar-plot div -->
                            
                            <div class="col-m-2" id="left-circular-div" style="background-color: #87CEEB;">
                                <svg id="circular_bar_svg" class="border rounded-4 shadow"></svg>
                            </div>

                            <!-- ring chart -->
                            <div class="col-md-2 border rounded-4 shadow" id="right-ring-div">
                                <div id="panel">
                                    <label id="location_label" style="position:relative; top:-9px">Location:</label>
                                    <div class="dropdowns" id="ring-drop"
                                        style="text-align: center;position:relative; top:-12px">
                                        <select class="form-select" id="dropdownloc">
                                            <option value=1> All</option>
                                        </select>
                                    </div>

                                    <label id="cc_label"
                                        style="float: left; margin-right: 0px; text-align: center;position:relative; top:-9px">Credit
                                        Card #:
                                    </label>
                                    <div class="dropdowns"
                                        style="width: 150px; float: left; margin-left: 10px;position:relative; top:-12px">

                                        <select class="form-select" id="dropdowncc">
                                            <option value=1> All</option>
                                        </select>
                                    </div>
                                </div>

                                <svg id="ring_svg" style="position:relative; top:-12px"></svg> <!-- ring svg -->
                            </div>
                        </div>

                         <!-- network chart -->
                         <div class="row-m-4 border rounded-4 shadow" id="network_div" style="background-color: #b0e0e6;">
                            <svg id="network_svg"></svg>
                        </div>

                    </div>


                </div>
                



            </div>
            <!-- shanky div -->
            <div class="col-md-2" id="left-shanky-div">
                <svg id="shankey_svg" class="border rounded-4 shadow" style="background-color:#E0ffff; margin: bottom 5rem;" m></svg>
            </div>
        </div>
        
        </div>
    </div>
</body>

<script>
</script>
</html>